<template>
    <!-- Login -->
    <div id="login">
      <div id="login-form">
        <h1>用户登陆</h1>
        <input type="text" placeholder="用户名" id="name" autocapitalize="off" v-model.trim=name aria-autocomplete="off" >
        <p style="visibility: hidden">用户名为必填选项</p>
        <input type="password" placeholder="密码" id="password" autocapitalize="off" v-model.trim="password">
        <p style="visibility: hidden">密码为必填选项</p>
        <div>
          <el-button type="primary" v-on:click="inputInfo">登录</el-button>
          <el-button type="info" v-on:click="resetInfo">重置</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
import Axios from 'axios';
  export default {
    name: "Login",
    data: function () {
      return {
        name: 'admin',
        password: '123456',
      }
    },
    methods: {
      // 清空当前填写信息
      resetInfo: function () {
        this.name = "";
        this.password = "";
      },
      //
      inputInfo: function () {
        Axios.get("http://localhost:8080/user/login/"+this.name+"/"+this.password)
        .then((res)=>{
            console.log(res)
            if(res.data.code==0){
                this.$message.error(res.data.msg);
                return;
            }
            // 跳转到 /user
            this.$router.push("/user");
        })
        .catch((err)=>{
            console.log(err)
            this.$message.error(err);
        })
      }
    },
    computed: {
  
    },
    mounted() {
      // css transition 样式
      let input = document.querySelectorAll("input");
      for (let i = 0; i < input.length; i++) {
        input[i].addEventListener("click", function () {
          input[i].style.width = '70%';

        })
        input[i].addEventListener("blur", function () {
          input[i].style.width = '60%';
          input[i].style.transition = '1s';
        })
      }
    },
    watch: {
      // 动态监测,验证 input 中 值的输入
      name: function f() {
        let p = document.querySelectorAll("p");
        if (this.name.length < 1) {
          p[0].innerHTML = "用户名称应大于 1 ";
        }
        if (this.name.length >= 1) {
          p[0].style.visibility = "hidden";
        }
        if (this.name.length === 0) {
          p[0].style.visibility = "visible";
        }
      },
      password: function f() {
        let p = document.querySelectorAll("p");
        if (this.password.length < 6) {
          p[1].style.visibility = "visible";
          p[1].innerHTML = "用户密码应大于 6 ";
        }
        if (this.password.length >= 6) {
          p[1].style.visibility = "hidden";
        }
        if (this.password.length === 0) {
          p[1].innerHTML = "请重新输入密码";
          p[1].style.visibility = "visible";
        }
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  #login {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    // 背景图片样式
    background-image: url("http://localhost:8080/images/backpaper.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  
  #login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    min-width: 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    // 表单 box-shadow 样式 好看
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
  
    h1 {
      width: 60%;
      margin: 50px auto 0;
      color: #c1c1c1;
      text-align: center;
    }
  
    input {
      width: 60%;
      margin: 0 auto;
      // 注意 border outline 默认值
      outline: none;
      border: none;
      padding: 10px;
      border-bottom: 1px solid #fff;
      background: transparent;
      color: white;
    }
  
    label {
      width: 60%;
      margin: 0 auto;
      position: relative;
      top: 30px;
    }
  
    div {
      width: 60%;
      margin: 10px auto;
      display: flex;
      justify-content: center;
      align-content: center;
    }
  
    button {
      // rgba
      background-color: rgba(255, 255, 255, 0.588);
      margin: 10px 25px 40px 25px;
    }
  
    p {
      width: 60%;
      margin: 8px auto;
      position: relative;
      left: -15px;
      color: #ff0000;
      font-size: 8px;
    }
  }
  
  </style>
  